<html>
<head>
<title>day14-作业-筛选-游戏 wiki.ets</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.s0 { color: #a9b7c6;}
.s1 { color: #faa23d;}
.s2 { color: #e2da90;}
.s3 { color: #aa7dfc;}
.s4 { color: #db7e9b;}
.s5 { color: #bbb529;}
.s6 { color: #52cb54;}
.s7 { color: #b3e54c;}
</style>
</head>
<body bgcolor="#2b2b2b">
<table CELLSPACING=0 CELLPADDING=5 COLS=1 WIDTH="100%" BGCOLOR="#606060" >
<tr><td><center>
<font face="Arial, Helvetica" color="#000000">
day14-作业-筛选-游戏 wiki.ets</font>
</center></td></tr></table>
<pre><span class="s0">import </span><span class="s1">{ </span><span class="s0">CQData</span><span class="s2">, </span><span class="s0">Hero</span><span class="s2">, </span><span class="s0">HeroType</span><span class="s2">, </span><span class="s0">NavItem </span><span class="s1">} </span><span class="s0">from </span><span class="s3">'../data/CQData'</span>
<span class="s0">import router from </span><span class="s3">'@ohos.router'</span>
<span class="s0">import </span><span class="s1">{ </span><span class="s0">it </span><span class="s1">} </span><span class="s0">from </span><span class="s3">'@ohos/hypium'</span>

<span class="s0">PersistentStorage</span><span class="s2">.</span><span class="s0">persistProp</span><span class="s4">(</span><span class="s3">'list'</span><span class="s2">, </span><span class="s0">CQData</span><span class="s2">.</span><span class="s0">getHeroList</span><span class="s4">())</span>

<span class="s5">@</span><span class="s0">Entry</span>
<span class="s5">@</span><span class="s0">Component</span>
<span class="s0">struct Page01_homework_cq </span><span class="s1">{</span>
  <span class="s6">// 筛选条件</span>
  <span class="s6">// @Watch('fn')</span>
  <span class="s5">@</span><span class="s0">State selectedType</span><span class="s2">: </span><span class="s0">HeroType </span><span class="s2">= </span><span class="s3">'剑士'</span>
  <span class="s6">// 获取导航数据，不更改 不需要加@State</span>
  <span class="s0">navList</span><span class="s2">: </span><span class="s0">NavItem</span><span class="s4">[] </span><span class="s2">= </span><span class="s0">CQData</span><span class="s2">.</span><span class="s0">getNavList</span><span class="s4">()</span>
  <span class="s6">// HeroList: Hero[] = CQData.getHeroList()</span>
  <span class="s5">@</span><span class="s0">StorageLink</span><span class="s4">(</span><span class="s3">'list'</span><span class="s4">)</span>
  <span class="s0">list</span><span class="s2">: </span><span class="s0">Hero</span><span class="s4">[] </span><span class="s2">= </span><span class="s4">[]</span>

  <span class="s6">// aboutToAppear(): void {</span>
  <span class="s6">//   this.fn()</span>
  <span class="s6">// }</span>
  <span class="s6">//</span>
  <span class="s6">// fn() {</span>
  <span class="s6">//   this.list = this.HeroList.filter((item) =&gt; {</span>
  <span class="s6">//     return item.type === this.selectedType</span>
  <span class="s6">//   })</span>
  <span class="s6">// }</span>

  <span class="s0">build</span><span class="s4">() </span><span class="s1">{</span>
    <span class="s0">Stack</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">alignContent</span><span class="s2">: </span><span class="s0">Alignment</span><span class="s2">.</span><span class="s0">BottomEnd </span><span class="s1">}</span><span class="s4">) </span><span class="s1">{</span>
      <span class="s0">Column</span><span class="s4">() </span><span class="s1">{</span>
        <span class="s6">// 顶部</span>
        <span class="s6">// 顶部</span>
        <span class="s0">Stack</span><span class="s4">() </span><span class="s1">{</span>
          <span class="s0">Row</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s2">: </span><span class="s7">10 </span><span class="s1">}</span><span class="s4">) </span><span class="s1">{</span>
            <span class="s6">// 还原 图标</span>
            <span class="s0">Image</span><span class="s4">(</span><span class="s0">$r</span><span class="s4">(</span><span class="s3">'app.media.ic_public_view_list'</span><span class="s4">))</span>
              <span class="s2">.</span><span class="s0">width</span><span class="s4">(</span><span class="s7">25</span><span class="s4">)</span>
              <span class="s2">.</span><span class="s0">onClick</span><span class="s4">(() </span><span class="s2">=&gt; </span><span class="s1">{</span>
                <span class="s6">// this.list = this.HeroList.filter((item) =&gt; {</span>
                <span class="s6">//   return item.type === this.selectedType</span>
                <span class="s6">// })</span>
                <span class="s0">this</span><span class="s2">.</span><span class="s0">list </span><span class="s2">= </span><span class="s0">CQData</span><span class="s2">.</span><span class="s0">getHeroList</span><span class="s4">()</span>
                <span class="s0">this</span><span class="s2">.</span><span class="s0">selectedType </span><span class="s2">= </span><span class="s3">'剑士'</span>
                <span class="s0">AlertDialog</span><span class="s2">.</span><span class="s0">show</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">message</span><span class="s2">: </span><span class="s3">'数据重置完毕' </span><span class="s1">}</span><span class="s4">)</span>
              <span class="s1">}</span><span class="s4">)</span>
            <span class="s0">Blank</span><span class="s4">()</span>
            <span class="s0">Image</span><span class="s4">(</span><span class="s0">$r</span><span class="s4">(</span><span class="s3">'app.media.ic_public_search'</span><span class="s4">))</span>
              <span class="s2">.</span><span class="s0">width</span><span class="s4">(</span><span class="s7">25</span><span class="s4">)</span>
            <span class="s0">Badge</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">count</span><span class="s2">: </span><span class="s7">2</span><span class="s2">, </span><span class="s0">style</span><span class="s2">: </span><span class="s1">{} }</span><span class="s4">) </span><span class="s1">{</span>
              <span class="s0">Image</span><span class="s4">(</span><span class="s0">$r</span><span class="s4">(</span><span class="s3">'app.media.ic_public_message'</span><span class="s4">))</span>
                <span class="s2">.</span><span class="s0">width</span><span class="s4">(</span><span class="s7">25</span><span class="s4">)</span>
            <span class="s1">}</span>
          <span class="s1">}</span>
          <span class="s2">.</span><span class="s0">width</span><span class="s4">(</span><span class="s3">'100%'</span><span class="s4">)</span>
          <span class="s2">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s7">10</span><span class="s4">)</span>

          <span class="s0">Text</span><span class="s4">(</span><span class="s3">'wiki-首页'</span><span class="s4">)</span>
            <span class="s2">.</span><span class="s0">fontWeight</span><span class="s4">(</span><span class="s7">900</span><span class="s4">)</span>
        <span class="s1">}</span>


        <span class="s6">// Logo + 类型</span>
        <span class="s0">Row</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s2">: </span><span class="s7">20 </span><span class="s1">}</span><span class="s4">) </span><span class="s1">{</span>
          <span class="s0">Image</span><span class="s4">(</span><span class="s0">$r</span><span class="s4">(</span><span class="s3">'app.media.ic_cq_logo'</span><span class="s4">))</span>
            <span class="s2">.</span><span class="s0">width</span><span class="s4">(</span><span class="s7">150</span><span class="s4">)</span>
          <span class="s0">Divider</span><span class="s4">()</span>
            <span class="s2">.</span><span class="s0">vertical</span><span class="s4">(</span><span class="s0">true</span><span class="s4">)</span>
            <span class="s2">.</span><span class="s0">height</span><span class="s4">(</span><span class="s7">50</span><span class="s4">)</span>
            <span class="s2">.</span><span class="s0">strokeWidth</span><span class="s4">(</span><span class="s7">2</span><span class="s4">)</span>

          <span class="s0">Text</span><span class="s4">(</span><span class="s0">this</span><span class="s2">.</span><span class="s0">selectedType</span><span class="s4">)</span>
            <span class="s2">.</span><span class="s0">fontSize</span><span class="s4">(</span><span class="s7">25</span><span class="s4">)</span>
            <span class="s2">.</span><span class="s0">fontWeight</span><span class="s4">(</span><span class="s7">900</span><span class="s4">)</span>
        <span class="s1">}</span>
        <span class="s2">.</span><span class="s0">width</span><span class="s4">(</span><span class="s3">'100%'</span><span class="s4">)</span>
        <span class="s2">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s7">10</span><span class="s4">)</span>


        <span class="s6">// 类型选择</span>
        <span class="s0">Row</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s2">: </span><span class="s7">10 </span><span class="s1">}</span><span class="s4">) </span><span class="s1">{</span>
          <span class="s0">ForEach</span><span class="s4">(</span><span class="s0">this</span><span class="s2">.</span><span class="s0">navList</span><span class="s2">, </span><span class="s4">(</span><span class="s0">item</span><span class="s2">: </span><span class="s0">NavItem</span><span class="s2">, </span><span class="s0">index</span><span class="s2">: </span><span class="s0">number</span><span class="s4">) </span><span class="s2">=&gt; </span><span class="s1">{</span>
            <span class="s0">Image</span><span class="s4">(</span><span class="s0">item</span><span class="s2">.</span><span class="s0">icon</span><span class="s4">)</span>
              <span class="s2">.</span><span class="s0">layoutWeight</span><span class="s4">(</span><span class="s7">1</span><span class="s4">)</span>
              <span class="s2">.</span><span class="s0">backgroundColor</span><span class="s4">(</span><span class="s0">this</span><span class="s2">.</span><span class="s0">selectedType </span><span class="s2">== </span><span class="s0">item</span><span class="s2">.</span><span class="s0">type </span><span class="s2">? </span><span class="s0">Color</span><span class="s2">.</span><span class="s0">Black </span><span class="s2">: </span><span class="s0">Color</span><span class="s2">.</span><span class="s0">Transparent</span><span class="s4">)</span>
              <span class="s2">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s7">5</span><span class="s4">)</span>
              <span class="s2">.</span><span class="s0">borderRadius</span><span class="s4">(</span><span class="s7">10</span><span class="s4">)</span>
              <span class="s2">.</span><span class="s0">onClick</span><span class="s4">(() </span><span class="s2">=&gt; </span><span class="s1">{</span>
                <span class="s0">this</span><span class="s2">.</span><span class="s0">selectedType </span><span class="s2">= </span><span class="s0">item</span><span class="s2">.</span><span class="s0">type</span>
              <span class="s1">}</span><span class="s4">)</span>
          <span class="s1">}</span><span class="s4">)</span>
        <span class="s1">}</span>
        <span class="s2">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s7">10</span><span class="s4">)</span>


        <span class="s6">// 列表</span>
        <span class="s0">List</span><span class="s4">() </span><span class="s1">{</span>
          <span class="s6">// 顶部标题</span>
          <span class="s0">ListItem</span><span class="s4">() </span><span class="s1">{</span>
            <span class="s0">Row</span><span class="s4">() </span><span class="s1">{</span>
              <span class="s0">Text</span><span class="s4">(</span><span class="s3">'英雄'</span><span class="s4">)</span>
                <span class="s2">.</span><span class="s0">fontWeight</span><span class="s4">(</span><span class="s7">900</span><span class="s4">)</span>
                <span class="s2">.</span><span class="s0">fontSize</span><span class="s4">(</span><span class="s7">20</span><span class="s4">)</span>
                <span class="s2">.</span><span class="s0">layoutWeight</span><span class="s4">(</span><span class="s7">1</span><span class="s4">)</span>
              <span class="s0">Text</span><span class="s4">(</span><span class="s3">'技能'</span><span class="s4">)</span>
                <span class="s2">.</span><span class="s0">fontWeight</span><span class="s4">(</span><span class="s7">900</span><span class="s4">)</span>
                <span class="s2">.</span><span class="s0">fontSize</span><span class="s4">(</span><span class="s7">20</span><span class="s4">)</span>
                <span class="s2">.</span><span class="s0">layoutWeight</span><span class="s4">(</span><span class="s7">1</span><span class="s4">)</span>
              <span class="s0">Text</span><span class="s4">(</span><span class="s3">'装备'</span><span class="s4">)</span>
                <span class="s2">.</span><span class="s0">fontWeight</span><span class="s4">(</span><span class="s7">900</span><span class="s4">)</span>
                <span class="s2">.</span><span class="s0">fontSize</span><span class="s4">(</span><span class="s7">20</span><span class="s4">)</span>
                <span class="s2">.</span><span class="s0">layoutWeight</span><span class="s4">(</span><span class="s7">1</span><span class="s4">)</span>
                <span class="s2">.</span><span class="s0">textAlign</span><span class="s4">(</span><span class="s0">TextAlign</span><span class="s2">.</span><span class="s0">Center</span><span class="s4">)</span>
            <span class="s1">}</span>
            <span class="s2">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s7">10</span><span class="s4">)</span>
          <span class="s1">}</span>

          <span class="s6">// 基于选中的英雄 type 筛选出对应的数组，渲染到页面上</span>
          <span class="s0">ForEach</span><span class="s4">(</span><span class="s0">this</span><span class="s2">.</span><span class="s0">list</span><span class="s2">.</span><span class="s0">filter</span><span class="s4">(</span><span class="s0">item </span><span class="s2">=&gt; </span><span class="s0">item</span><span class="s2">.</span><span class="s0">type </span><span class="s2">=== </span><span class="s0">this</span><span class="s2">.</span><span class="s0">selectedType</span><span class="s4">)</span><span class="s2">,</span>
            <span class="s4">(</span><span class="s0">item</span><span class="s2">: </span><span class="s0">Hero</span><span class="s2">, </span><span class="s0">index</span><span class="s2">: </span><span class="s0">number</span><span class="s4">) </span><span class="s2">=&gt; </span><span class="s1">{</span>
              <span class="s6">// 列表项目</span>
              <span class="s0">ListItem</span><span class="s4">() </span><span class="s1">{</span>
                <span class="s0">Row</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s2">: </span><span class="s7">10 </span><span class="s1">}</span><span class="s4">) </span><span class="s1">{</span>
                  <span class="s0">Column</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s2">: </span><span class="s7">5 </span><span class="s1">}</span><span class="s4">) </span><span class="s1">{</span>
                    <span class="s6">// 英雄-头像</span>
                    <span class="s0">Image</span><span class="s4">(</span><span class="s0">item</span><span class="s2">.</span><span class="s0">heroIcon</span><span class="s4">)</span>
                      <span class="s2">.</span><span class="s0">width</span><span class="s4">(</span><span class="s3">'60%'</span><span class="s4">)</span>
                      <span class="s2">.</span><span class="s0">syncLoad</span><span class="s4">(</span><span class="s0">true</span><span class="s4">)</span>
                    <span class="s6">// 英雄-名字</span>
                    <span class="s0">Text</span><span class="s4">(</span><span class="s0">item</span><span class="s2">.</span><span class="s0">heroName</span><span class="s4">)</span>
                      <span class="s2">.</span><span class="s0">fontSize</span><span class="s4">(</span><span class="s7">14</span><span class="s4">)</span>
                  <span class="s1">}</span>
                  <span class="s2">.</span><span class="s0">alignItems</span><span class="s4">(</span><span class="s0">HorizontalAlign</span><span class="s2">.</span><span class="s0">Start</span><span class="s4">)</span>
                  <span class="s2">.</span><span class="s0">layoutWeight</span><span class="s4">(</span><span class="s7">1</span><span class="s4">)</span>

                  <span class="s0">Column</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s2">: </span><span class="s7">5 </span><span class="s1">}</span><span class="s4">) </span><span class="s1">{</span>
                    <span class="s6">// 技能-图片</span>
                    <span class="s0">Image</span><span class="s4">(</span><span class="s0">item</span><span class="s2">.</span><span class="s0">skillName</span><span class="s4">)</span>
                      <span class="s2">.</span><span class="s0">width</span><span class="s4">(</span><span class="s3">'60%'</span><span class="s4">)</span>
                      <span class="s2">.</span><span class="s0">syncLoad</span><span class="s4">(</span><span class="s0">true</span><span class="s4">)</span>
                    <span class="s6">// 技能-名字</span>
                    <span class="s0">Text</span><span class="s4">(</span><span class="s0">item</span><span class="s2">.</span><span class="s0">skillName</span><span class="s4">)</span>
                      <span class="s2">.</span><span class="s0">fontSize</span><span class="s4">(</span><span class="s7">14</span><span class="s4">)</span>
                  <span class="s1">}</span>
                  <span class="s2">.</span><span class="s0">alignItems</span><span class="s4">(</span><span class="s0">HorizontalAlign</span><span class="s2">.</span><span class="s0">Start</span><span class="s4">)</span>
                  <span class="s2">.</span><span class="s0">layoutWeight</span><span class="s4">(</span><span class="s7">1</span><span class="s4">)</span>

                  <span class="s0">Column</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s2">: </span><span class="s7">5 </span><span class="s1">}</span><span class="s4">) </span><span class="s1">{</span>
                    <span class="s6">// 装备-图片</span>
                    <span class="s0">Image</span><span class="s4">(</span><span class="s0">item</span><span class="s2">.</span><span class="s0">weaponIcon</span><span class="s4">)</span>
                      <span class="s2">.</span><span class="s0">width</span><span class="s4">(</span><span class="s3">'60%'</span><span class="s4">)</span>
                      <span class="s2">.</span><span class="s0">syncLoad</span><span class="s4">(</span><span class="s0">true</span><span class="s4">)</span>
                    <span class="s6">// 装备-名字</span>
                    <span class="s0">Text</span><span class="s4">(</span><span class="s0">item</span><span class="s2">.</span><span class="s0">weaponName</span><span class="s4">)</span>
                      <span class="s2">.</span><span class="s0">fontSize</span><span class="s4">(</span><span class="s7">14</span><span class="s4">)</span>
                      <span class="s2">.</span><span class="s0">alignSelf</span><span class="s4">(</span><span class="s0">ItemAlign</span><span class="s2">.</span><span class="s0">Center</span><span class="s4">)</span>
                  <span class="s1">}</span>
                  <span class="s2">.</span><span class="s0">layoutWeight</span><span class="s4">(</span><span class="s7">1</span><span class="s4">)</span>
                <span class="s1">}</span>
                <span class="s2">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s7">10</span><span class="s4">)</span>

              <span class="s1">}</span>
              <span class="s2">.</span><span class="s0">swipeAction</span><span class="s4">(</span><span class="s1">{</span>
                <span class="s0">end</span><span class="s2">: </span><span class="s0">this</span><span class="s2">.</span><span class="s0">delAction</span><span class="s4">(</span><span class="s0">item</span><span class="s2">.</span><span class="s0">id</span><span class="s4">)</span>
              <span class="s1">}</span><span class="s4">)</span>
            <span class="s1">}</span><span class="s4">)</span>

        <span class="s1">}</span>
        <span class="s2">.</span><span class="s0">edgeEffect</span><span class="s4">(</span><span class="s0">EdgeEffect</span><span class="s2">.</span><span class="s0">None</span><span class="s4">)</span>
        <span class="s2">.</span><span class="s0">layoutWeight</span><span class="s4">(</span><span class="s7">1</span><span class="s4">)</span>
        <span class="s2">.</span><span class="s0">divider</span><span class="s4">(</span><span class="s1">{</span>
          <span class="s0">strokeWidth</span><span class="s2">: </span><span class="s7">1</span><span class="s2">,</span>
          <span class="s0">color</span><span class="s2">: </span><span class="s0">Color</span><span class="s2">.</span><span class="s0">Gray</span><span class="s2">,</span>
          <span class="s0">startMargin</span><span class="s2">: </span><span class="s7">10</span><span class="s2">,</span>
          <span class="s0">endMargin</span><span class="s2">: </span><span class="s7">10</span>
        <span class="s1">}</span><span class="s4">)</span>

      <span class="s1">}</span>
      <span class="s2">.</span><span class="s0">width</span><span class="s4">(</span><span class="s3">'100%'</span><span class="s4">)</span>
      <span class="s2">.</span><span class="s0">height</span><span class="s4">(</span><span class="s3">'100%'</span><span class="s4">)</span>
    <span class="s1">}</span>
  <span class="s1">}</span>

  <span class="s6">// 删除用的 Builder</span>
  <span class="s5">@</span><span class="s0">Builder</span>
  <span class="s0">delAction</span><span class="s4">(</span><span class="s0">id</span><span class="s2">: </span><span class="s0">number</span><span class="s4">) </span><span class="s1">{</span>
    <span class="s0">Image</span><span class="s4">(</span><span class="s0">$r</span><span class="s4">(</span><span class="s3">'app.media.ic_public_delete'</span><span class="s4">))</span>
      <span class="s2">.</span><span class="s0">width</span><span class="s4">(</span><span class="s7">60</span><span class="s4">)</span>
      <span class="s2">.</span><span class="s0">backgroundColor</span><span class="s4">(</span><span class="s3">'#ec6073'</span><span class="s4">)</span>
      <span class="s2">.</span><span class="s0">fillColor</span><span class="s4">(</span><span class="s0">Color</span><span class="s2">.</span><span class="s0">White</span><span class="s4">)</span>
      <span class="s2">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s7">10</span><span class="s4">)</span>
      <span class="s2">.</span><span class="s0">borderRadius</span><span class="s4">(</span><span class="s7">30</span><span class="s4">)</span>
      <span class="s2">.</span><span class="s0">margin</span><span class="s4">(</span><span class="s7">10</span><span class="s4">)</span>
      <span class="s2">.</span><span class="s0">onClick</span><span class="s4">(() </span><span class="s2">=&gt; </span><span class="s1">{</span>
        <span class="s0">this</span><span class="s2">.</span><span class="s0">list </span><span class="s2">= </span><span class="s0">this</span><span class="s2">.</span><span class="s0">list</span><span class="s2">.</span><span class="s0">filter</span><span class="s4">((</span><span class="s0">item</span><span class="s4">) </span><span class="s2">=&gt; </span><span class="s1">{</span>
          <span class="s0">return item</span><span class="s2">.</span><span class="s0">id </span><span class="s2">!= </span><span class="s0">id</span>
        <span class="s1">}</span><span class="s4">)</span>
      <span class="s1">}</span><span class="s4">)</span>
  <span class="s1">}</span>
<span class="s1">}</span>

</pre>
</body>
</html>